<button nz-button nzType="primary" (click)="showModal()">新增</button> <button nz-button nzType="primary" nzDanger
  (click)="onDelete();">删除</button>
<button nz-button nzType="primary" (click)="setUrlPermission()">设置权限</button>
<button nz-button nzType="primary" (click)="checkUrlPermission()">查看权限</button>
<nz-table #headerTable [nzData]="listOfCurrentPageData" [nzPageSize]="pageable.size" nzFrontPagination="false"
  [nzScroll]="{ y: '400px' }" [nzPageIndex]="pageable.page" nzServerRender="true" [nzTotal]="total"
  (nzCurrentPageDataChange)="onCurrentPageDataChange($event)" (nzPageSizeChange)="onPageSizeChange($event)"
  (nzPageIndexChange)="onPageIndexChange($event)" nzShowPagination nzShowSizeChanger>
  <thead>
    <tr>
      <th nzWidth="60px" [nzChecked]="checked" [nzIndeterminate]="indeterminate"
        (nzCheckedChange)="onAllChecked($event)"></th>
      <th>名称</th>
      <th nzWidth="30%">代码</th>
      <th nzWidth="100px">备注</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of headerTable.data">
      <td [nzChecked]="setOfCheckedId.has(data.id)" 
        (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
      <td>{{ data.name }}</td>
      <td>{{ data.code }}</td>
      <td>{{ data.remark }}</td>
      <td></td>
    </tr>
  </tbody>
</nz-table>

<nz-modal [(nzVisible)]="isVisible" nzTitle="新增" [nzFooter]="null" (nzOnCancel)="handleCancel()">
  <ng-container *nzModalContent>
    <form nz-form nzLayout="vertical" [formGroup]="validateForm" (ngSubmit)="submitForm()">
      <nz-form-item>
        <nz-form-label>名称</nz-form-label>
        <nz-form-control nzErrorTip="">
          <input nz-input formControlName="name" placeholder="" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>代码</nz-form-label>
        <nz-form-control nzErrorTip="">
          <input nz-input formControlName="code" placeholder="" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>备注</nz-form-label>
        <nz-form-control nzErrorTip="">
          <textarea rows="3" nz-input formControlName="remark" placeholder="请输入备注"> </textarea>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <button nz-button nzType="primary">保存</button>
          <button nz-button nzType="primary" (click)="handleCancel();">取消</button>
        </nz-form-control>

      </nz-form-item>
    </form>
  </ng-container>
</nz-modal>

<nz-modal [(nzVisible)]="isVisibleForPermission" nzTitle="授权" [nzFooter]="null" (nzOnCancel)="handlePermissionCancel()">
  <ng-container *nzModalContent>
  拟授权URL:

  <div *ngFor="let url of selectedUrls;let i = index">{{i}}. {{url.name}}</div>

  <br />
  授权角色列表：
  <br />
  <nz-select nzMode="multiple" nzPlaceHolder="Select users" nzAllowClear nzShowSearch nzServerSearch
    [(ngModel)]="selectedUser" (nzOnSearch)="onSearch($event)">
    <ng-container *ngFor="let o of optionList">
      <nz-option *ngIf="!isLoading" [nzValue]="o" [nzLabel]="o.name"></nz-option>
    </ng-container>
    <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
      <i nz-icon nzType="loading" class="loading-icon"></i>
      Loading Data...
    </nz-option>
  </nz-select>
  <br />
  <button nz-button nzType="primary" (click)="addPermission()">授权</button> <button nz-button nzType="primary" nzDanger (click)="delPermission()">去权</button>
  <br />
</ng-container>
</nz-modal>


<nz-modal [(nzVisible)]="isVisibleForCheckPermission" nzTitle="查看授权" [nzFooter]="null" (nzOnCancel)="handleCheckPermissionCancel()">
  <ng-container *nzModalContent>
    <div *ngFor="let permission of currentPermissions">{{permission.sparrowUrl.name}} {{permission.sysrole.name}}</div>

  </ng-container>
</nz-modal>